<template>
  <view>
    <view class="view-title"> {{ data.title }} </view>
    <view class="actions">
      <text class="yticon icon-naozhong"></text>
      {{ data.created_at }}
    </view>
    <view class="info" v-html="data.content">  </view>
    

    <!-- 猜你喜欢 -->
    <!-- <view class="guess">
      <view class="section-tit">猜你喜欢</view>
      <view class="guess-list">
        <view v-for="(item, index) in data.guessList" :key="index" class="guess-item">
          <view class="image-wrapper">
            <image :src="item.src" :class="item.loaded" mode="aspectFill" @load="imageOnLoad('guessList', index)"></image>
          </view>
          <text class="title clamp" :class="{ Skeleton: !loaded }">{{ item.title }}</text>
          <text class="clamp" :class="{ Skeleton: !loaded }">{{ item.title2 }}</text>
        </view>
      </view>
    </view> -->
    <!-- bot -->
    <Footer/>
  </view>
</template>

<script>
import News from '../../api/news'
import Footer from '@/components/footer';

export default {
  components: {
    Footer
  },
  data() {
    return {
      loaded: false,
      currentEpd: 1,
      data: {
        
      },
      shareList: [],
    }
  },
  async onLoad(options) {
    this.id = options.id

    if (this.id) {
      this.loadData(this.id)
    }
  },
  methods: {
    //获取详情
    async loadData(id) {
      // 商品详情
      const that = this
      await News.detail(id, {}, async function (res) {
        console.log("🤡 ~ res:", res)
        that.data =  res
        console.log("🤡 ~ that.data:", that.data)
      })
      
    },
    imageOnLoad(key, index) {
      this.$set(this.data[key][index], 'loaded', 'loaded')
    },
    changeEpd(index) {
      let list = this.data.episodeList
      let epd = list[index]
      this.$api.msg(`切换到第${epd}项`)
      this.currentEpd = epd
    },
    //分享
    share() {
      this.$refs.share.toggleMask()
    },
    //收藏
    favorite() {
      this.data.favorite = !this.data.favorite
    },
  },
  //处理遮罩层物理返回键
  onBackPress() {
    if (this.$refs.share.show) {
      this.$refs.share.toggleMask()
      return true
    }
  },
}
</script>

<style lang="scss">
page {
  background: $page-color-base;
}

.carousel {
  height: 200px;
  .image-wrapper {
    display: flex;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
.scroll-view-wrapper {
  display: flex;
  align-items: center;
  height: 90upx;
  padding: 20upx 0 20upx 40upx;
  background: #fff;
}
.episode-panel {
  white-space: nowrap;
  width: 100%;
  view {
    display: inline-block;
    margin-right: 30upx;
    width: 56upx;
    font-size: $font-lg;
    color: $font-color-base;
    &.current {
      color: #07a7a7;
    }
  }
}
.view-title{
  font-size: 16px;
  text-align: center;
  padding: 40upx 40upx 0 40upx;
  background: #fff;
}

.info {
  // display: flex;
  align-items: center;
  padding: 10upx 30upx;
  background: #fff;
	
  .title {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: $font-lg + 4upx;
    color: $font-color-dark;

    text:last-child {
      font-size: $font-sm;
      color: $font-color-light;
      margin-top: 4upx;
      &.Skeleton {
        width: 220upx;
      }
    }
  }
  .yticon {
    font-size: 14px;
    color: $font-color-base;
    margin: 0 10upx 0 30upx;
  }
}

.actions {
  padding: 10upx 28upx;
  background: #fff;

  .yticon {
    font-size: 15px;
    color: $font-color-base;
    padding: 10upx 12upx;
    &.active {
      color: #ff4443;
    }
    &:nth-child(2) {
      font-size: 50upx;
    }
  }
}

.section-tit {
  font-size: $font-base + 2upx;
  color: $font-color-dark;
  margin-bottom: 30upx;
  text-align: center;
}

.guess {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 30upx 40upx 10upx;
  margin-top: 16upx;
  background: #fff;
}

.guess-list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.guess-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-width: 40%;
  margin-right: 26upx;
  padding-bottom: 40upx;

  &:nth-child(2n) {
    margin-right: 0;
  }

  image {
    width: 100%;
    height: 200upx;
    border-radius: 10upx;
  }

  text {
    font-size: $font-sm;
    color: $font-color-light;
    &.Skeleton {
      width: 180upx;
      &.title {
        width: 140upx;
      }
    }
    &.title {
      font-size: $font-base + 2upx;
      color: $font-color-dark;
      margin-top: 16upx;
      margin-bottom: 8upx;
    }
  }
}
.evalution {
  display: flex;
  flex-direction: column;
  background: #fff;
  margin-top: 16upx;
  padding: 40upx 0;
}

.eva-item {
  display: flex;
  padding: 20upx 40upx;
  image {
    width: 60upx;
    height: 60upx;
    border-radius: 50px;
    flex-shrink: 0;
    margin-right: 24upx;
  }
}
.eva-right {
  display: flex;
  flex-direction: column;
  flex: 1;
  font-size: $font-sm + 2upx;
  color: $font-color-light;
  position: relative;
  .zan-box {
    display: flex;
    align-items: base-line;
    position: absolute;
    top: 10upx;
    right: 10upx;
    .yticon {
      margin-left: 8upx;
    }
  }
  .content {
    font-size: $font-base;
    color: #333;
    padding-top: 20upx;
  }
}
</style>
